<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>操作面板</title>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <style>
      .box {
        padding-top: 150px;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .select-box {
        margin-top: 30px;
      }
      .btn-box {
        margin-top: 180px;
      }
      .btn1 {
        margin-left: 20px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <section>
        文章/视频/深圳号id:
        <input
          id="contentId"
          type="text"
          value=""
          placeholder="请输入文章/视频/深圳号id"
        />
      </section>
      <section class="select-box">
        选择环境：
        <label><input type="radio" name="env" value="dev">测试</label>
        <label><input id="envRadio" type="radio" name="env" value="pre" checked >预发</label>
        <label><input type="radio" name="env" value="pro">生产</label>
        <!-- <select name="env" id="envId">
          <option value="dev">测试</option>
          <option value="pre" selected>预发</option>
          <option value="pro">生产</option>
        </select> -->
      </section>


      <section class="select-box">
        选择类型：
        <label><input id="typeRadio" type="radio" name="type" value="article" checked >文章</label>
        <label><input type="radio" name="type" value="video" >视频</label>
        <label><input type="radio" name="type" value="audio" >音频</label>
        <label><input type="radio" name="type" value="ctmedia">深圳号</label>
        <!-- <select name="type" id="typeId">
          <option value="article" selected>文章</option>
          <option value="video">视频</option>
          <option value="ctmedia">深圳号</option>
        </select> -->
      </section>
      <div class="btn-box">
        <button class="btn" onclick="reset()">重置</button>
        <button class="btn1" onclick="generate()">生成页面</button>
      </div>
    </div>
  </body>
  <script>
    function reset() {
      document.getElementById("contentId").value = "";
      $("#envRadio").prop("checked",true);  
      $("#typeRadio").prop("checked",true);  
    }
    function generate(val) {
      var idVal = document.getElementById("contentId").value;
      console.log("idVal", idVal);
      var envVal = $("input[name='env']:checked").val();
      console.log("envVal", envVal);
      var typeVal = $("input[name='type']:checked").val();
      console.log("typeVal", typeVal);
      if (!idVal) {
        alert("id不能为空！");
        return;
      }
      fetch(envVal, typeVal, idVal);
    }
    function fetch(envVal, typeVal, idVal) {
      var params = {
        envVal,
        typeVal,
        idVal,
      };
      $.ajax({
        url: "http://localhost:5000/api",
        type: "get",
        dataType: "json",
        data: params,
        success: function (res) {
          console.log(`🚀 ~ fetch ~ res`, res);
        },
      });
    }
  </script>
</html>
